<template>
  <view style="background-color: #f3f5f7;height: 100vh;" >
    <view class="searchPP">
      <image
        @click="goBackM"
        style="width: 0.6rem; height: 1rem; padding: 0rem 0.5rem 0rem 0rem"
        src="../../style/image/cargo/leftarow.jpg"
        alt=""/>
      <view class="searchP">
        <view class="search" :style="{ width: '100%' }">
          <u-search
            placeholder="请输入订单号"
            shape="round"
            v-model="keyword"
			@search="searchOrder"
            :show-action="false"
          ></u-search>
        </view>
        
      </view>
    </view>

    <view class="my">
		
        <view class="totle-price" >
			<view class="totle-price-text" >
			  <span  >订单数：</span><span>{{repairLists.length}}</span><span  >个</span>
			</view>

			<view  @click="calendarShowM" :style="{ display:'flex', justifyContent:'center' ,alignItems:'center' ,backgroundColor:'white', borderRadius:'5px',padding:'0.3rem' }" >
				 <image :style="{  width:'1rem',height:'1rem' }" src="../../style/image/stati/A33.png" alt="">
				 <view :style="{ fontSize:'0.6rem', padding:'0rem 0rem 0rem 0.5rem' }"  >{{selectTime}}</view>
			</view>
        </view>

        <view style="background-color: #f3f5f7;padding: 1rem;" class="repairListsP">
        
            <view  class="repairLists"  v-for="(item,index) in repairLists" :key="index" :load-text="loadText">
				<view   @click="orderDetailedM(item.id)"  class="repairLists-child"  >

					<view class="repairLists-top">
							<view style="display: flex;align-items: center;">
								<image style="width: 1rem;;height:1rem;margin-right: 0.3rem;" src="../../style/image/order/charge.png" alt="">
								<view> 
								<span style="font-size: 0.72rem;font-family: PingFang SC;
								font-weight: 300;color: #02AF74;" >
								({{item.modelsName}})</span> 
								订单编号：
								<span style="font-size: 0.72rem;font-family: PingFang SC;font-weight: 300;">
									{{item.orderSn}}</span></view>
							</view>

							<view>{{orderStatusString(item.orderStatus)}}</view>
					</view>

					<view class="repairLists-head">
						<view style="
						  display: flex;
						  align-items: center;
						  justify-content: space-between;
						  margin: 0.2rem 0rem; " >
							<view style="
								font-size: 0.72rem;
								font-family: PingFang SC;
								font-weight: 300;
								color: #333333; " > 租借商户 </view>
							<view style="
								font-size: 0.72rem;
								font-family: PingFang SC;
								font-weight: 300;
								color: #333333; " > {{item.outShopName}} </view>
						</view>
					  
						<view v-if="item.orderStatus=='end'" style="
						  display: flex;
						  align-items: center;
						  justify-content: space-between;
						  margin: 0.2rem 0rem; " >
							<view style="
								font-size: 0.72rem;
								font-family: PingFang SC;
								font-weight: 300;
								color: #333333; " > 归还商户 </view>
							<view style="
								font-size: 0.72rem;
								font-family: PingFang SC;
								font-weight: 300;
								color: #333333; " > {{item.inShopName}} </view>
						</view>
					  
						<view style="
						  display: flex;
						  align-items: center;
						  justify-content: space-between;
						  margin: 0.2rem 0rem; " >
							<view style="
								font-size: 0.72rem;
								font-family: PingFang SC;
								font-weight: 300;
								color: #333333; " > 充电宝SN码 </view>
							<view style="
								font-size: 0.72rem;
								font-family: PingFang SC;
								font-weight: 300;
								color: #333333; " > {{item.bankSn}} </view>
						</view>
					  
						<view style="
						  display: flex;
						  align-items: center;
						  justify-content: space-between;
						  margin: 0.2rem 0rem; " >
							<view style="
								font-size: 0.72rem;
								font-family: PingFang SC;
								font-weight: 300;
								color: #333333; " > 底座SN码 </view>
							<view style="
								font-size: 0.72rem;
								font-family: PingFang SC;
								font-weight: 300;
								color: #333333; " > {{item.outSn}} </view>
						</view>
					  
						<view style="
						  display: flex;
						  align-items: center;
						  justify-content: space-between;
						  margin: 0.2rem 0rem; " >
							<view style="
								font-size: 0.72rem;
								font-family: PingFang SC;
								font-weight: 300;
								color: #333333; " > 租借时间 </view>
							<view  style="
								font-size: 0.72rem;
								font-family: PingFang SC;
								font-weight: 300;
								color: #333333; " > {{item.rentDate}} </view>
						</view>
					  
						<view v-if="item.orderStatus=='end'" style="
						  display: flex;
						  align-items: center;
						  justify-content: space-between;
						  margin: 0.2rem 0rem; " >
							<view style="
								font-size: 0.72rem;
								font-family: PingFang SC;
								font-weight: 300;
								color: #333333; " > 归还时间 </view>
							<view  style="
								font-size: 0.72rem;
								font-family: PingFang SC;
								font-weight: 300;
								color: #333333; " > {{item.backDate}} </view>
						</view>
					  
					</view>
				</view>
				
				<view :style="{ display: 'flex',justifyContent: 'center',padding: '0.5rem'}">
					<view v-if="item.orderStatus!='end'" class="repairBtn" @click="closeOrder(item)">结束订单</view>
				</view>
            </view>
			
			<u-loadmore v-show="loadmoreModal" :status="loadStatus" :load-text="loadText"/>
			
			<!-- <u-empty   style="margin-top:0rem;" v-if="repairLists.length==0" text="暂无数据" mode="data"></u-empty> -->
			
        </view>
	
	
		<u-popup v-model="popupShow" mode="bottom">
			<view>
				<view style="text-align: center;margin: 1rem 0rem 0rem 0rem;" >请选择筛选类型:</view>
				<view class="classesifyP">
					<view class="classesify">
						<view :class="selectIfyC==1?'classesify-puc':'classesify-pucs' "  @click="puckMonth" >按月</view>
						<!-- <view class="classesify-pucs" @click="puckMonth" v-else>代理12</view> -->
						<view class="classesify-buss"  @click="puckDay" v-if="selectIfyC == 2">按日</view>
						<view  class="classesify-bus"  @click="puckDay" v-else>按日</view>
					</view>
				</view>
			</view>
		</u-popup>
		
		<u-picker v-model="pickerShow"  @confirm="pickerConfirm"  mode="time"></u-picker>
		<u-select v-model="selectShow"  :default-value=[10,10]  mode="mutil-column" :list="list" @confirm="selectConfirm"></u-select>
	
	
    </view>

  </view>
</template>

<script lang='ts' >
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";

import { userOrderListRenting } from "../../utils/uniApi";
import { endOrder } from "../../utils/uniApi";

@Component({
  //   @Component  是一个装修器   不可以在下面写语句
  name: "test",
})
export default class extends Vue {
  @Prop({
    type: String, // 父组件传递给子组件的数据类型
    required: false, // 是否必填
    default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
  })
  msg!: string;
  public shopId:any;    //商户id
  public pageN: any = 1;//分页的页数
  public keyword = "";//搜索关键字
  public repairLists=[];//本人 订单
  public popupShow=false//show日历选择控件
  public pickerShow=false//日历按日选择控件
  public selectShow=false//日历按月选择控件
  public selectTime = "请选择日期";
  
  public selectIfyC: any = 0;//选择日  月的切换tab
  public selectDate: any={type:'',value:''};//日期选择  type类型day:按日 month:按月  value选择的日期值
  
  //加载参数
  public loadStatus = "nomore";
  public loadText = {
    loadmore: "轻轻上拉",
    loading: "努力加载中",
    nomore: "暂无更多数据",
  };
  public loadmoreModal = true;
  public continueTypes = true;
  
  public list= [
					[
						{value: '1',label: '2010'},
						{value: '2',label: '2011'},
						{value: '3',label: '2012'},
						{value: '4',label: '2013'},
						{value: '5',label: '2014'},
						{value: '6',label: '2015'},
						{value: '7',label: '2016'},
						{value: '8',label: '2017'},
						{value: '9',label: '2018'},
						{value: '10',label: '2019'},
						{value: '11',label: '2020'},
						{value: '12',label: '2021'},
					],
					[
						{value: '13',label: '1'},
						{value: '14',label: '2'},
						{value: '15',label: '3'},
						{value: '16',label: '4'},
						{value: '17',label: '5'},
						{value: '18',label: '6'},
						{value: '19',label: '7'},
						{value: '20',label: '8'},
						{value: '21',label: '9'},
						{value: '22',label: '10'},
						{value: '23',label: '11'},
						{value: '24',label: '12'},
					],
				];

  created() {}
  
  onLoad(options:any){
	  if(options.shopid){
			this.shopId = options.shopid;
			uni.setStorage({
			  key: "shopOrderShopid",
			  data: this.shopId,
			  success: function () {
			  },
			});
	  }else{
		  this.shopId =uni.getStorageSync("shopOrderShopid")
	  }
	 
  }
  
  onHide(){
  	  uni.hideLoading();
  }
  
  //下拉刷新
  onPullDownRefresh() {
      setTimeout(function () {
        uni.redirectTo({
          url: "../../pages/order/shopOrder",
        });
        uni.stopPullDownRefresh();
      }, 1000);
  }
  //上拉加载更多
  onReachBottom() {
    this.pageN = this.pageN + 1;
    this.orderListData(this.pageN,this.selectDate,this.keyword);
  }
  
  onShow(){
	  this.selectDate.type = 'day';
	  
	  const Dates = new Date();
	  const year: number = Dates.getFullYear();
	  const month: any = ( Dates.getMonth() + 1 ) < 10 ? '0' + ( Dates.getMonth() + 1 ) : ( Dates.getMonth() + 1 );
	  const day: any = Dates.getDate() < 10 ? '0' + Dates.getDate() : Dates.getDate();
	  this.selectDate.value = year + '-' + month + '-' + day;
	  console.log('输出当前时间：'+this.selectDate.value)
	  this.selectTime = this.selectDate.value;
	  this.pageN = 1;
	  this.orderListData(this.pageN,this.selectDate,this.keyword);
  }

  mounted() {
    //  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
	
  }
  
  
  searchOrder(value:any){
  	  this.keyword = value;
	  this.pageN = 1;
  	  this.orderListData(this.pageN,this.selectDate,this.keyword);
  }
  //   ++++++++    日期选择器   start
  calendarShowM(){
	this.popupShow = true;
  }
  puckDay() {
    //方法中获取this
    this.selectIfyC = 2;
  
     this.popupShow=false
     this.pickerShow=true
  
     setTimeout(()=>{
     
      this.selectIfyC = 0;
     },1000)
  }
  puckMonth() {
    this.selectIfyC = 1; 
  
      this.popupShow=false
      this.selectShow=true
  
    setTimeout(()=>{
     
      this.selectIfyC = 0;
     },1000)
  
    
  }
  //按日选择  确认按钮
  pickerConfirm(data:any){
    console.log('按日起',data)
	this.selectDate.type = 'day'
    this.selectDate.value = data.year+'-'+data.month+'-'+data.day;
	this.selectTime = this.selectDate.value;
	this.pageN = 1;
	this.orderListData(this.pageN,this.selectDate,this.keyword);
  }
  //按月选择  确认按钮
  selectConfirm(data:any){
      console.log('按月起',data)
      let str=(data[0] as any).label+'-'+(data[1] as any).label
      this.selectDate.value = str
	  this.selectDate.type='month'
	  this.selectTime = this.selectDate.value;
	  this.pageN = 1;
	  this.orderListData(this.pageN,this.selectDate,this.keyword);
  }
    //   ++++++++    日期选择器   end
  
  
  //订单状态转换
  orderStatusString(status: string){
  	  if(status == "timeout"){
  		  return '超时'
  	  } else if (status == "end"){
  		  return '已完成'
  	  }else if (status == "ing"){
  		  return '租赁中'
  	  }else{
		  return ''
	  }
  }
  
   orderDetailedM(id:any){
          uni.navigateTo({
    url: '../order/orderDetaileding?orderId='+id
    });
  }
  
  //手动取消结束订单
  closeOrder(item:any){
  	  // console.log("++++++++订单取消的："+item.id)
  	  let params = {
  	    userId:uni.getStorageSync("userId") == ""? "": parseInt(uni.getStorageSync("userId")),
  		orderId:item.id == ""? "": parseInt(item.id),
  	  };
  	  
  	  endOrder(params).then((res: any) => {
  	  	// console.log('++++++++++++++++++++订单取消' + JSON.stringify(res.data) )
  	      if(res.data.code==200){
			  uni.hideLoading();
			  uni.showToast({
			  	title: '取消订单成功',
			  	icon:'none',
			  	duration: 2000
			  });
			  this.orderListData(this.pageN,this.selectDate,this.keyword);
  	      }else{
			  uni.hideLoading();
			  uni.showToast({
			  	title: '取消订单失败',
			  	icon:'none',
			  	duration: 2000
			  });
  	      }
  	  
  	  });
  }
  
  //拉取网络数据
  orderListData(pageNo:any,date:any,key:any){
  	  uni.showLoading({
  	  	title: '加载中'
  	  });
  	  let params = {
		keyWord:key,     //搜索关键字
		dateType:date.type,     //查询条件-查询时间类型（month:月  day:日）
		queryDate:date.value,     //2020-11-04       2020-11
  	    pageNo: pageNo,
  		pageSize: 10,
  		shopId:this.shopId == ""? "": parseInt(this.shopId), //商户id
  		userId:uni.getStorageSync("userId") == ""? "": parseInt(uni.getStorageSync("userId")),
  	  };
  	  // console.log('++++++++++++++++++++全部订单中参数' + JSON.stringify(params) )
  	  userOrderListRenting(params).then((res: any) => {
  		  
  	    // console.log('++++++++++++++++++++全部订单中' + JSON.stringify(res.data) )
  	      if(res.data.code==200){
			  
			  var boolee = res.data.hasNext == false && this.continueTypes == false;
			  if (res.data.hasNext == true) {
			    this.loadStatus = "loadmore";
			  } else {
			    this.loadStatus = "nomore";
			  }
			  console.log(res.data.hasNext, this.continueTypes, boolee);
			  if (res.data.isFirst || !boolee) {
				
				if (res.data.hasNext == false) {
				  this.continueTypes = false;
				}
				
				if(this.repairLists.length>0 && this.pageN==1){//搜索  删除已有数据
				  this.repairLists = [];
				}
				this.repairLists = this.repairLists.concat(res.data.data)
				// this.repairLists = res.data.data
				uni.hideLoading();
			  }
			  
			  
			  
  	      }else{
			  uni.hideLoading();
			  uni.showToast({
					title: '数据加载失败',
					icon: 'none',
					duration: 2000
			  });
  	      }
  	  
  	  });
  
  }

  goBackM(){
	  uni.navigateBack({
	    delta: 1,
	  });
  }

}
</script>

<style  lang="scss"  scoped>
.searchPP {
  background-color: white;
  padding: 0.5rem;

  display: flex;
  align-items: center;
  border-bottom: 1px solid #e8e8e8;
}
.searchP {
  background-color: white;
  display: flex;
  width: 100%;
  justify-content: space-between;
}


.classesifyP {
  text-align: center;
  display: flex;
  justify-content: center;
  padding: 0.6rem;
  background-color: white;
}

.classesify {
  width: 4rem;
  height: 1.5rem;
  border: 1px solid #02af74;
  display: flex;
  align-items: center;
  border-radius: 5px;
  /* //   background-color: red; */
}

.classesify-puc {
  width: 50%;
  font-size: 0.6rem;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
  height: 100%;
  line-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #02af74;
}
.classesify-pucs {
  width: 50%;
  font-size: 0.6rem;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
  height: 100%;
  line-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
}

.classesify-bus {
  width: 50%;
  font-size: 0.6rem;
}
.classesify-buss {
  width: 50%;
  font-size: 0.6rem;
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
  height: 100%;
  line-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #02af74;
}

.totle-price{
     display: flex;
     justify-content: space-between;
     align-items: center;
     background-color: #f3f5f7;
     padding: 0.2rem 0.5rem;
}
.totle-price-text{

font-size: 0.73rem;
font-family: PingFang SC;
font-weight: 400;
color: #000000;
}
.totle-price-text span{

font-size: 0.73rem;
font-family: PingFang SC;
font-weight: 300;
color: #000000;
}


.repairLists{

 background-color: white;
 margin-bottom: 1rem;
 border-radius: 0.2rem;
 /* padding: 1rem; */
 /* margin: 1rem; */
 
 }
 .repairLists-top{
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 0.5rem;
border-bottom: 1px solid #e8e8e8;

}
 
 .repairLists-child{
 
  border-bottom: 1px solid #E5E5E5;
 }
.repairLists-head{
   padding: 1rem;
}

.repairBtn{
width: 4.5rem;
height: 1.5rem;
background: #FFFFFF;
border: 1px solid #02AF74;
border-radius: 0.3rem;
font-size: 0.78rem;
font-family: PingFang SC;
font-weight: 300;
color: #02B074;
text-align: center;
align-items: center;
line-height: 1.5rem;

}

.classesifyP {
  text-align: center;
  display: flex;
  justify-content: center;

   padding: 1rem 1rem 3rem 1rem;
}
.classesify {
  width: 6rem;
  height: 1.8rem;
  border: 1px solid #02af74;

  display: flex;
  align-items: center;
  border-radius: 10px;
  /* //   background-color: red; */
}

.classesify-puc {
  width: 50%;
  font-size: 0.6rem;
  border-bottom-left-radius: 8px;
  border-top-left-radius: 8px;
  height: 100%;
  line-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #02af74;
}
.classesify-pucs {
  width: 50%;
  font-size: 0.6rem;
  border-bottom-left-radius: 8px;
  border-top-left-radius: 8px;
  height: 100%;
  line-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
}

.classesify-bus {
  width: 50%;
   font-size: 0.6rem;
}
.classesify-buss {
  width: 50%;
  font-size: 0.6rem;
  border-bottom-right-radius: 8px;
  border-top-right-radius: 8px;
  height: 100%;
  line-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #02af74;
}
</style>